(() => {
  let oldTb2 = new Tabbar({
    tabId: "tab-old",
    titleClass: "old-title",
    contentClass: "old-item",
    activeClass: "active",
    callBack: (res) => {
    },
  });
  // window.oldTb2 = oldTb2;
  // oldTb2.select(0);

  let zhongTb2 = new Tabbar({
    tabId: "tab-zhong",
    titleClass: "zhong-title",
    contentClass: "zhong-item",
    activeClass: "active",
    callBack: (res) => {
    },
  });
  // window.zhongTb2 = zhongTb2;
  // zhongTb2.select(0);
  let gaoTb2 = new Tabbar({
    tabId: "tab-gao",
    titleClass: "gao-title",
    contentClass: "gao-item",
    activeClass: "active",
    callBack: (res) => {
    },
  });
  // window.gaoTb2 = gaoTb2;
  // gaoTb2.select(0);
  let ele = {};
  ele.top_img = $("#top_img");
  ele.record = $(".record");
  ele.modal_record = $("#modal-record");
  ele.close_record = $("#close-record");
  ele.modal_cut = $("#modal-cut");
  ele.modal_cut2 = $("#modal-cut2");
  ele.close_cut = $("#close-cut");
  ele.sell = $(".sell");
  ele.yuji = $("#yuji");
  ele.chahao4 = $("#chahao4");
  ele.btn_que4 = $("#btn_que4");
  ele.inputId = $("#inputId");
  ele.modal_neng = $("#modal-neng");
  ele.left_jian = $("#left_jian");
  ele.right_jia = $("#right_jia");
  ele.modal_exchange = $("#modal-exchange");
  ele.close_kf = $("#close-kf");
  ele.img2_img = $("#img2_img");
  ele.yongyou = $("#yongyou");
  ele.close_shu = $("#close_shu");
  ele.modal_shuomingTit = $("#modal-shuomingTit");
  ele.wenhao3 = $("#wenhao3");
  ele.xiaodian3 = $("#xiaodian3");
  ele.qiege_btn1 = $("#qiege_btn1");
  ele.qiege_btn2 = $("#qiege_btn2");
  ele.qiege_btn3 = $("#qiege_btn3");
  ele.zhunliun1 = $("#zhunliun1");
  ele.yibiaopan = $("#yibiaopan");
  ele.yibiaopan2 = $("#yibiaopan2");
  ele.yibiaopan3 = $("#yibiaopan3");
  ele.img1_img = $("#img1_img");
  ele.img3_img = $("#img3_img");
  ele.chahao5 = $("#chahao5");
  ele.center_ov = $("#center_ov");
  ele.exnum = $("#exnum");
  ele.btn_que5 = $("#btn_que5");
  ele.myhave_3 = $("#myhave_3");
  ele.progress3 = $("#progress3");
  ele.myhave_2 = $("#myhave_2");
  ele.yuji2_2 = $("#yuji2_2");
  ele.yuji2_3 = $("#yuji2_3");
  ele.haveList1 = $("#haveList1");
  ele.haveList2 = $("#haveList2");
  ele.haveList3 = $("#haveList3");
  ele.progress2 = $("#progress2");
  ele.img_bg = $("#img_bg");
  ele.money_num = $("#money_num");
  ele.dian_left2 = $("#dian_left2");
  ele.xiaodian2 = $("#xiaodian2");
  ele.modal_jiesuo = $("#modal-jiesuo");

  ele.shang_top = $("#shang_top");
  ele.close_cut2 = $("#close-cut2");
  ele.zhunliun2 = $("#zhunliun2");
  ele.zhunliun3 = $("#zhunliun3");
  ele.center_img3 = $("#center_img3");
  ele.center_img2 = $("#center_img2");
  ele.haoyoui = $("#haoyoui");
  ele.haoyoui2 = $("#haoyoui2");
  ele.haoyoui1 = $("#haoyoui1");
  ele.option_primary = $("#option-primary");
  ele.cut_confirm1 = $("#cut_confirm1");
  ele.cut_confirm2 = $("#cut_confirm2");
  ele.btmBoxIn1 = $("#btmBoxIn1");
  ele.chahao3 = $("#chahao3");
  ele.dian_left3 = $("#dian_left3");
  ele.btn4 = $("#btn4");
  ele.jieshao_Fn3 = $("#jieshao_Fn3");
  ele.jieshao_Fn2 = $("#jieshao_Fn2");
  ele.jieshao_Fn1 = $("#jieshao_Fn1");
  ele.diaoluo3 = $("#diaoluo3");
  ele.diaoluo2 = $("#diaoluo2");
  ele.diaoluo1 = $("#diaoluo1");
  ele.queding = $("#queding");
  ele.tit3 = $("#tit3");
  ele.tit2 = $("#tit2");
  ele.tit1 = $("#tit1");
  ele.dian_left1 = $("#dian_left1");
  ele.modal_wanfaJ = $("#modal-wanfaJ");
  ele.option_middle = $("#option-middle");
  ele.option_senior = $("#option-senior");
  ele.modal_jiangli = $("#modal-jiangli");
  ele.navcont_List = $("#navcont_List");
  ele.more = $("#more");
  ele.empty = $("#empty");
  ele.meiyou = $("#meiyou");
  ele.dian_left1 = $("#meiyou");
  ele.xiaodian1 = $("#xiaodian1");
  ele.xiaodian_bot = $("#xiaodian_bot");
  ele.tab_title1 = $("#tab_title1");
  ele.tab_title3 = $("#tab_title3");
  ele.tab_title2 = $("#tab_title2");
  ele.img3_qie = $("#img3_qie");
  ele.img2_qie = $("#img2_qie");
  ele.img1_qie = $("#img1_qie");
  ele.img1_tan = $("#img1_tan");
  ele.img2_tan = $("#img2_tan");
  ele.img3_tan = $("#img3_tan");
  ele.lookGG = $("#lookGG");
  ele.wenhao1 = $("#wenhao1");
  ele.wenhao2 = $("#wenhao2");
  ele.close4 = $("#close4");
  ele.mkad5 = $("#mkad5");
  ele.close_shu2 = $("#close_shu2");
  ele.modal_shuomingtan = $("#modal-shuomingtan");
  ele.modal_pinmu = $("#modal-pinmu");

  // 刘欣 引导 返回到矿山 从切割 2023-6-22 20:47:47
  ele.top_img.onclick = () => {
	let ugid = guide.getUsersGuideId();
    if (~[161].indexOf(ugid)) guide.hideMine_161();
    else if (~[185].indexOf(ugid)) guide.hideSearch_185();
    history.back();
  };
  // ====================
	
	// 广告加速器
	function addTime() {
		let token = getCookie("token");
		ajax({
			url: API_PATH.ADVEERTISEMENT_ADD_TIME,
			method: 'get',
			header: {
				'Authorization': token,
			},
	
			success: res => {
				if (res.code == 1) {
					
				} else openTips(res.msg || '未知错误');
			}
		});
	}
	
	
  closeMdl(ele.tab_title3);
  closeMdl(ele.tab_title2);
  closeMdl(ele.tab_title1);
  let page = 1;
  let num = 600;
  //   ele.topin1 = $("#topin1");
  //   ele.topin2 = $("#topin2");
  //   ele.topin3 = $("#topin3");
  let list = [];
  let list_dui = [];
  let obj = {};
  let qieObj = {};
  let id = 0;
  let ids = 0;
  let cj_id = null;
  let shan_id = 1;
  let timeT = null;
  let state = 1;
  let qiejie = {};
  let record_msg = [];
  let qgjlList = [];
  let active1 = 0;
  let active2 = 0;
  let active3 = 0;
  // 免费
  let is_free = 0;
  // 切割卷
  let is_qg = 0;
  // openMdl(ele.modal_pinmu);
  setTimeout(() => {
    closeMdl(ele.modal_pinmu);
  }, 500);
  //! 打开切割记录
  for (let i = 0; i < ele.record.length; i++) {
    ele.record[i].onclick = () => {
      qiegejl();
      openMdl(ele.modal_record);
    };
  }
  // !点击问好
  ele.close4.onclick = () => {
    openMdl(ele.modal_shuomingtan);
  };
  // !点击关闭
  ele.close_shu2.onclick = () => {
    closeMdl(ele.modal_shuomingtan);
  };
  // !调用无缝滚动代码

  let is_guangg = "";
  let ad_max_num = "";
  let ad_see_num = "";

  adv_index();
  // 广告免费
  function adv_index() {
    let token = getCookie("token");
    ajax({
      url: API_PATH.ADVERTISEMENT_ADV_INDEX,
      method: "GET",
      header: {
        Authorization: token,
      },
      success: (res) => {
        if (res.code == 1) {
          ad_max_num = res.data.max_num;
          ad_see_num = res.data.see_num;
          ele.mkad5.innerHTML =
            '<span>免看广告 <span class="fontgreen">' +
            res.data.lose_num +
            "/" +
            res.data.all_num +
            "</span></span>";
          if (res.data.lose_num >= res.data.all_num) {
            ele.mkad5.innerHTML =
              '<span>免看广告 <span class="fontred">' +
              res.data.lose_num +
              "/" +
              res.data.all_num +
              "</span></span>";
          }
          initAsync();
          // !
        } else openTips(res.msg || "未知错误");
      },
    });
  }

  // 广告领取免费
  function adv_index_reward(id) {
    let token = getCookie("token");
    ajax({
      url: API_PATH.ADVERTISEMENT_GET_RECORD,
      method: "GET",
      header: {
        Authorization: token,
      },
      data: {
        type: id,
      },
      success: (res) => {
        if (res.code == 1) {
          adv_index();
          openTips(res.msg);
        } else openTips(res.msg || "未知错误");
      },
    });
  }
  ele.mkad5.onclick = () => {
    adv_index_reward(5);
  };

  let uid = getCookie("userid");
  let device = getClientType();

  // 加载广告 安卓
  function loadAd() {
    window.android.loadPlayRewardVideo(
      "1661241482792681560",
      uid,
      "5",
      "callBack3"
    );
  }

  // 激励视频回调：
  window.callBack3 = function (params) {
    if (params.code == 2) {
      // openTips('奖励已送达')
      //奖励达成回调
      setTimeout(() => {
        initAsync();
      }, 500);
      // if (device == "ios") {
      // } else {
      //   // alert("chenggong");
      // }
    }
    if (params.code == 1) {
      // alert(params)
      // if (device == "ios") {
      // } else {
      //   // alter("奖励已送达");
      // }
      setTimeout(() => {
        initAsync();
      }, 500);
      //展现回调
    }
    if (params.code == 0) {
      // alert(params)
      // if (device == "ios") {
      // } else {
      alert(params.msg);
      // }
      //错误回调：错误信息：params.msg
    }
  };

  function loadPlayRewardVideo(extradata) {
    //调用激励视频广告方法
    extradata = extradata.toString();
    uid = uid.toString();
    window.webkit.messageHandlers.loadPlayRewardVideo.postMessage({
      userId: uid,
      extraData: extradata,
    });
    // window.webkit.messageHandlers.loadPlayRewardVideo.postMessage("12345");
  }

  function onRewardLoadFailed() {
    //激励视频失败回调
    // alert("激励视频请求失败");
  }

  function onRewardVideoVerify() {
    //激励视频奖励达成回调
    // alert("激励视频奖励达成了");
  }

  function onRewardVideoClose() {
    //激励视频关闭回调
    // alert("激励视频关闭了");
  }

  // 调用广告
  ele.lookGG.onclick = () => {
	  adv_index();
    if (list[0].use_power == 0) {
      return openTips("请投入能量后再重试");
    }
    if (ad_see_num >= ad_max_num) {
      openTips("今日视频次数已达上限，请明日再来");
    } else {
		addTime();
      if (is_guangg == 0) {
        is_guangg = 1;

        setTimeout(() => {
          is_guangg = 0;
        }, 2000);

        if (device == "ios") {
          loadPlayRewardVideo(5);
        } else if (device == "android") {
          loadAd(5);
        } else {
          openTips("请下载安卓最新版体验");
        }
      }
    }
  };

  //! 切割记录调用接口
  function qiegejl() {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.QIEGELU,
      header: {
        Authorization: token,
      },
      data: {
        page: page,
        // size: 1,
      },
      success: (res) => {
        if (res.code == 1) {
          obj = res.data.detail;
          qgjlList = [...qgjlList, ...res.data.data];
          if (qgjlList.length === 0) {
            page = 0;
            ele.more.style.display = "none";
            ele.empty.style.display = "block";
          } else {
            initQgjl();
            page++;
            if (page > res.data.last_page) {
              ele.more.innerText = "没有更多了";
              ele.more.onclick = null;
            } else {
              ele.more.innerText = "加载更多";
              ele.more.onclick = () => qiegejl(page);
            }
          }
        } else openTips(res.msg);
        initQgjl();
      },

      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // !渲染切割记录
  function initQgjl() {
    let newqgjlList = qgjlList
      .map((item) => {
        return `
       <div class="navlist">
                  <p>${item.st_info.name}</p>
                  <span>${item.created_at}</span>
                  <div style="display:${
                    item.type == 1 ? "block" : "none"
                  };" class="">
                    <span>${
                      item.house_info ? item.house_info.name : 0
                    }</span><span>x${Number(item.money).toFixed(0)}</span>
                  </div>
                  <div style="display:${
                    item.type == 0 ? "block" : "none"
                  };" class="">
                    <img src="http://img.qxgs.cc/tiantianlaishouzu/img/home/jinbi.png" alt="" />
                    <span>${item.money}</span>
                  </div>
                </div>
      `;
      })
      .join(" ");
    ele.navcont_List.innerHTML = newqgjlList;
  }
  //关闭 领取记录
  ele.close_record.onclick = () => {
    // todo清空数组
    qgjlList = [];
    closeMdl(ele.modal_record);
  };
  // setInterval(() => {
  // 关闭说明
  ele.chahao3.onclick = () => {
    closeMdl(ele.modal_wanfaJ);
  };
  ele.btn4.onclick = () => {
    closeMdl(ele.modal_wanfaJ);
  };
  // 关闭金币
  ele.queding.onclick = () => {
    closeMdl(ele.modal_jiangli);
  };
  // 点击打开玩法
  ele.jieshao_Fn1.onclick = () => {
    openMdl(ele.modal_wanfaJ);
  };
  ele.jieshao_Fn2.onclick = () => {
    openMdl(ele.modal_wanfaJ);
  };
  ele.jieshao_Fn3.onclick = () => {
    openMdl(ele.modal_wanfaJ);
  };
  // 点击跳转切割
  ele.img1_qie.onclick = () => {
    // 刘欣 引导 添加能量 2023-6-22 19:26:57
	let ugid = guide.getUsersGuideId();
    if (~[153].indexOf(ugid)) guide.hideMine_153();
    location.href = "../page/mine3.html";
  };
  ele.img2_qie.onclick = () => {
    location.href = "../page/mine3.html";
  };
  ele.img3_qie.onclick = () => {
    location.href = "../page/mine3.html";
  };
  // 点击跳转探索
  ele.img1_tan.onclick = () => {
    // 刘欣 引导 添加能量 2023-6-23 06:37:43
	let ugid = guide.getUsersGuideId();
    if (~[161, 181].indexOf(ugid)) guide.hideSearch_181();
    location.href = "../page/search.html";
  };
  ele.img2_tan.onclick = () => {
    location.href = "../page/search.html";
  };
  ele.img3_tan.onclick = () => {
    location.href = "../page/search.html";
  };
  // 点击跳转全服掉落
  ele.diaoluo3.onclick = () => {
    location.href = "../page/energy_drop.html";
  };
  ele.diaoluo2.onclick = () => {
    location.href = "../page/energy_drop.html";
  };
  ele.diaoluo1.onclick = () => {
    location.href = "../page/energy_drop.html";
  };
  // }, 500);
  // todo切割点击叉

  ele.close_cut2.onclick = () => {
    closeMdl(ele.modal_cut2);
  };
  // !抽奖
  ele.qiege_btn1.onclick = () => {
    if (ele.qiege_btn1.innerHTML == "暂停") {
      qie1();
    } else {
      if (!cj_id) {
        openTips("请选择");
      } else {
        state = 1;
        openMdl(ele.modal_cut);
        // qie1();
      }
    }
  };

  // !抽奖
  ele.qiege_btn2.onclick = () => {
    if (ele.qiege_btn2.innerHTML == "暂停") {
      qie2();
    } else {
      if (!cj_id) {
        openTips("请选择");
      } else {
        state = 2;
        openMdl(ele.modal_cut2);
        // qie2();
      }
    }
  };
  // !抽奖
  ele.qiege_btn3.onclick = () => {
    if (ele.qiege_btn3.innerHTML == "暂停") {
      qie3();
    } else {
      if (!cj_id) {
        openTips("请选择");
      } else {
        state = 3;
        openMdl(ele.modal_cut2);
        // qie3();
      }
    }
  };
  // !确认切割
  ele.cut_confirm1.onclick = () => {
    closeMdl(ele.modal_cut);
    qie1();
  };
  ele.cut_confirm2.onclick = () => {
    if (state == 2) {
      closeMdl(ele.modal_cut2);
      qie2();
    } else if (state == 3) {
      closeMdl(ele.modal_cut2);
      qie3();
    }
  };

  function qie1() {
    // todo左边的点
    let left_dian = ele.dian_left1.getBoundingClientRect();
    // todo指针点
    let zhuan_dian = ele.xiaodian1.getBoundingClientRect();
    // let reat=element.getBoundingClientRect()
    if (ele.qiege_btn1.innerHTML == "暂停") {
      let he = zhuan_dian.left - left_dian.left;
      if (he < 36.5) {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      } else if (he < 82.5) {
        console.log("黄色", 2);
        jiesuo(cj_id, 2);
      } else if (he < 131) {
        console.log("红色", 3);
        jiesuo(cj_id, 3);
      } else if (he < 178) {
        console.log("黄色", 2);
        jiesuo(cj_id, 2);
      } else if (he < 199) {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      } else {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      }
      ele.qiege_btn1.innerHTML = "切割";
      ele.zhunliun1.classList.add("gunabi");
    } else {
      ele.zhunliun1.classList.add("dakai");
      ele.zhunliun1.classList.remove("gunabi");

      ele.qiege_btn1.innerHTML = "暂停";
    }
  }

  function qie2() {
    // todo左边的点
    let left_dian = ele.dian_left2.getBoundingClientRect();
    // todo指针点
    let zhuan_dian = ele.xiaodian2.getBoundingClientRect();
    // !左偏移量
    // !设备宽度
    let fix = (187 / 375) * 100;
    // let reat=element.getBoundingClientRect()
    if (ele.qiege_btn2.innerHTML == "暂停") {
      let he = zhuan_dian.left - left_dian.left;
      if (he < 36.5) {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      } else if (he < 82.5) {
        console.log("黄色", 2);
        jiesuo(cj_id, 2);
      } else if (he < 131) {
        console.log("红色", 3);
        jiesuo(cj_id, 3);
      } else if (he < 178) {
        console.log("黄色", 2);
        jiesuo(cj_id, 2);
      } else if (he < 199) {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      } else {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      }
      ele.qiege_btn2.innerHTML = "切割";
      ele.zhunliun2.classList.add("gunabi");
    } else {
      ele.zhunliun2.classList.add("dakai");
      ele.zhunliun2.classList.remove("gunabi");

      ele.qiege_btn2.innerHTML = "暂停";
    }
  }

  function qie3() {
    // todo左边的点
    let left_dian = ele.dian_left3.getBoundingClientRect();
    // todo指针点
    let zhuan_dian = ele.xiaodian3.getBoundingClientRect();
    if (ele.qiege_btn3.innerHTML == "暂停") {
      let he = zhuan_dian.left - left_dian.left;
      console.log(left_dian.left, zhuan_dian.left, he);
      if (he < 36.5) {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      } else if (he < 82.5) {
        console.log("黄色", 2);
        jiesuo(cj_id, 2);
      } else if (he < 131) {
        console.log("红色", 3);
        jiesuo(cj_id, 3);
      } else if (he < 178) {
        console.log("黄色", 2);
        jiesuo(cj_id, 2);
      } else if (he < 199) {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      } else {
        console.log("绿色", 1);
        jiesuo(cj_id, 1);
      }
      ele.qiege_btn3.innerHTML = "切割";
      ele.zhunliun3.classList.add("gunabi");
    } else {
      ele.zhunliun3.classList.add("dakai");
      ele.zhunliun3.classList.remove("gunabi");

      ele.qiege_btn3.innerHTML = "暂停";
    }
  }
  //关闭 切割
  ele.close_cut.onclick = () => {
    closeMdl(ele.modal_cut);
  };
  // todo关闭能量添加
  ele.chahao4.onclick = () => {
    ids = 0;
    ele.inputId.value = active1;
    closeMdl(ele.modal_neng);
  };
  //todo 点击好友分割奖励
  ele.haoyoui.onclick = () => {
    location.href = "../page/mine_slicing.html";
  };
  //todo 点击好友分割奖励
  ele.haoyoui1.onclick = () => {
    location.href = "../page/mine_slicing.html";
  };
  //todo 点击好友分割奖励
  ele.haoyoui2.onclick = () => {
    location.href = "../page/mine_slicing.html";
  };
  // todo点击加
  ele.right_jia.onclick = () => {
    num = +num + +active1;
    ele.inputId.value = num;
  };
  // todo点击叉
  ele.chahao5.onclick = () => {
    closeMdl(ele.modal_jiesuo);
  };
  // todo点击确认请求解锁原石
  ele.btn_que5.onclick = () => {
    jiesuos(shan_id);
  };
  // todo点击减
  ele.left_jian.onclick = () => {
    if (num <= active1) {
      openTips("最小为1");
    } else {
      num = num - active1;
      ele.inputId.value = num;
    }
  };
  // todo监听input
  ele.inputId.oninput = (e) => {
    num = Number(e.target.value);
  };
  //todo 点击叉擦掉兑换商店
  ele.close_kf.onclick = () => {
    closeMdl(ele.modal_exchange);
  };
  //todo 点击打开兑换商店
  ele.img1_img.onclick = () => {
    duihuan();
    openMdl(ele.modal_exchange);
  };
  //todo 点击打开兑换商店
  ele.img2_img.onclick = () => {
    duihuan();
    openMdl(ele.modal_exchange);
  };
  //todo 点击打开兑换商店
  ele.img3_img.onclick = () => {
    duihuan();
    openMdl(ele.modal_exchange);
  };

  // todo点击能量添加确认
  ele.btn_que4.onclick = () => {
    let val = ele.inputId.value.trim();
    if (val.length == 0) {
      openTips("请输入正确的数字！");
    } else {
      energy(ids, val);
    }
  };
  //跳转到出售页面
  for (let i = 0; i < ele.sell.length; i++) {
    ele.sell[i].onclick = () => {
      location.href = "../page/stoneSell.html";
    };
  }
  // todo说明点击关闭
  ele.close_shu.onclick = () => {
    closeMdl(ele.modal_shuomingTit);
  };
  // todo点击问号时候弹出
  ele.wenhao3.onclick = () => {
    openMdl(ele.modal_shuomingTit);
  };
  ele.wenhao2.onclick = () => {
    openMdl(ele.modal_shuomingTit);
  };
  ele.wenhao1.onclick = () => {
    openMdl(ele.modal_shuomingTit);
  };
  // todo发送请求
  initAsync();

  function initAsync() {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.KUANGSHAN,
      header: {
        Authorization: token,
      },
      success: (res) => {
        list = res.data.list;
        obj = res.data.detail;

        initList();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // todo初始数据
  function initList() {
    // todo渲染上方能量
    let topin1All = document.querySelectorAll("#topin1");
    topin1All.forEach((item, index) => {
      item.innerHTML = `
		    <p>正在使用的能量：${list[index].use_power}个</p>
            <span>（能量消耗：${list[index].active}/次）</span>`;
    });
    // todo渲染是否解锁
    list.forEach((item, index) => {
      if (item.is_lock == 1) {
        $(`#thingbg${index + 1}`).innerHTML = `<div id="sou_jie" data-id="${
          item.id
        }" class="suo">
											  <img   src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/${index + 1}.png" alt="" />
											  <p id="time_over${index + 1}">挖掘倒计时：<span></span></p>
											  <img class="thingsuo1" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/mask.png" alt="" />
											  <img class="thingsuo2" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/suo.png" alt="" />
											</div>`;
        if (index >= 1) {
          $(`#btn${index + 1}`).innerHTML = "未解锁";
          $(`#btn${index + 1}`).classList.remove("btn1");
          $(`#btn${index + 1}`).classList.add(`jiesuo${index}`);
        }
      } else {
        $(`#thingbg${index + 1}`).innerHTML = `<div  class="timef">
                            <img style="height:${
                              index == 0 ? "210px" : " "
                            };" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/${index + 1}.png" alt="" />
                            <p id="time_over${
                              index + 1
                            }">挖掘倒计时：<span></span></p>
                          </div>`;
        if (index >= 1) {
          $(`#btn${index + 1}`).innerHTML = "添加能量";
          $(`#btn${index + 1}`).classList.add("btn1");
        }
      }
    });
    // todo渲染底部我的能量
    list.forEach((item, index) => {
      $(`#btmLeft${index + 1}`).innerHTML = `<div class="btm1 btm2">
                                <p>${item.name}原石：</p>
                                <span>${item.my_rough || 0}</span>
                                <button id="sell${
                                  index + 1
                                }"  class="sell">兑换金币</button>
                              </div>
                              <div class="btm1">
                                <p>我的能量总数：</p>
                                <span>${obj.my_power}个</span>
                                <img src="http://img.qxgs.cc/tiantianlaishouzu/img/yuanshi/MG_NL.png" class="img_jiaonang"/>
                              </div>`;
    });
    // todo渲染预计剩多少时间
    ele.yuji.innerHTML = `${list[0].msg}`;
    // todo渲染数量
    $(
      "#progress2"
    ).innerHTML = `<span id="hezi2" class="hezi"></span><span class="progress_sapn">${
      list[1].has_num ? list[1].has_num : "0"
    }/${list[1].quantity}</span>`;
    $(
      "#progress3"
    ).innerHTML = `<span id="hezi3" class="hezi"></span><span class="progress_sapn">${
      list[2].has_num ? list[2].has_num : "0"
    }/${list[2].quantity}</span>`;
    //todo渲染进度条
    $("#hezi2").style.width = (list[1].has_num / list[1].quantity) * 100 + "%";
    $("#hezi3").style.width = (list[2].has_num / list[2].quantity) * 100 + "%";

    // !判断是否显示进度条
    if (list[1].is_lock != 1) {
      closeMdl(ele.yuji2_2);
      closeMdl(ele.myhave_2);
      closeMdl(ele.progress2);
    }
    if (list[2].is_lock != 1) {
      closeMdl(ele.yuji2_3);
      closeMdl(ele.myhave_3);
      closeMdl(ele.progress3);
    }
    // todo点击跳转到我的出售页面
    $("#sell1").onclick = () => {
      location.href = "../page/stoneSell.html";
    };
    $("#sell2").onclick = () => {
      location.href = "../page/stoneSell.html";
    };
    $("#sell3").onclick = () => {
      location.href = "../page/stoneSell.html";
    };
    // !点击解锁矿山
    let sou_jieAll = document.querySelectorAll("#sou_jie");
    sou_jieAll.forEach((item) => {
      item.onclick = () => {
        shan_id = item.dataset.id;
        openMdl(ele.modal_jiesuo);
      };
    });

    // todo点击添加能量
    ele.btn1 = $("#btn1");
    ele.btn2 = $("#btn2");
    ele.btn3 = $("#btn3");
    ele.btn1.onclick = () => {
      active1 = list[0].active;
      num = list[0].active;
      ele.inputId.value = num;
      // 刘欣 引导 添加能量 2023-6-22 19:17:37
	  let ugid = guide.getUsersGuideId();
      if (~[151].indexOf(ugid)) {
        guide.showMine_152();
        return;
      }
      // ↑↑↑↑↑
      if (list[0].is_lock == 1) {
        openTips("未解锁");
      } else {
        ids = list[0].id;
        ele.yongyou.innerHTML = `当前拥有能量：${obj.my_power}`;
        openMdl(ele.modal_neng);
      }
    };
    ele.btn2.onclick = () => {
      active1 = list[1].active;
      num = list[1].active;
      ele.inputId.value = num;
      if (list[1].is_lock == 1) {
        // !点击解锁后
        let jiesuo = document.querySelectorAll("#sou_jie");
        shan_id = jiesuo[0].dataset.id;
        openMdl(ele.modal_jiesuo);
        openTips("未解锁");
      } else {
        ids = list[1].id;
        ele.yongyou.innerHTML = `当前拥有能量：${obj.my_power}`;
        openMdl(ele.modal_neng);
      }
    };
    ele.btn3.onclick = () => {
      active1 = list[2].active;
      num = list[2].active;
      ele.inputId.value = num;
      if (list[2].is_lock == 1) {
        // !点击解锁后
        let jiesuo = document.querySelectorAll("#sou_jie");
        shan_id = jiesuo[0].dataset.id;
        openMdl(ele.modal_jiesuo);
        openTips("未解锁");
      } else {
        ids = list[2].id;
        ele.yongyou.innerHTML = `当前拥有能量：${obj.my_power}`;
        openMdl(ele.modal_neng);
      }
    };
    //! 渲染挖掘倒计时
    ele.time_over1 = $("#time_over1");
    ele.time_over2 = $("#time_over2");
    ele.time_over3 = $("#time_over3");
    if (list[0].use_power == 0) {
      closeMdl(ele.time_over1);
    }
    if (list[1].use_power == 0) {
      closeMdl(ele.time_over2);
    }
    if (list[2].use_power == 0) {
      closeMdl(ele.time_over3);
    }
    if (list[0].use_power > 0) {
      clearInterval(timeT);
      let time = list[0].valid_day;
      openMdl(ele.time_over1);
      timeT = setInterval(() => {
        if (time == 0) {
          initAsync();
          clearInterval(timeT);
        }
        ele.time_over1.innerHTML = `挖掘倒计时：<span>${getCountMiao(
          time
        )}</span>`;
        time--;
      }, 1000);
      // valid_day;
    }
    // !第二个挖掘倒计时
    if (list[1].use_power > 0) {
      let timeT2 = null;
      clearInterval(timeT2);
      let time2 = list[1].valid_day;
      openMdl(ele.time_over2);
      timeT2 = setInterval(() => {
        if (time2 == 0) {
          clearInterval(timeT2);
          initAsync();
        }
        ele.time_over2.innerHTML = `挖掘倒计时：<span>${getCountMiao(
          time2
        )}</span>`;
        time2--;
      }, 1000);
    }
    // !第三个挖掘倒计时
    if (list[2].use_power > 0) {
      let timeT3 = null;
      clearInterval(timeT3);
      let time3 = list[2].valid_day;
      openMdl(ele.time_over3);
      timeT3 = setInterval(() => {
        if (time3 == 0) {
          clearInterval(timeT3);
          initAsync();
        }
        ele.time_over3.innerHTML = `挖掘倒计时：<span>${getCountMiao(
          time3
        )}</span>`;
        time3--;
      }, 1000);
      // valid_day;
    }
  }
  // !点击能量加载
  function energy(id, num) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.ENERGY,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
        num: num,
      },
      success: (res) => {
        openTips(res.msg);
        if (res.code == 1) {
          closeMdl(ele.modal_neng);
          initAsync();
        }
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  //! 调用兑换商店
  function duihuan() {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.DUIHUANS,
      header: {
        Authorization: token,
      },
      success: (res) => {
        list_dui = res.data;
        initDui();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }

  function initDui() {
    ele.exnum.innerHTML = `
    <p>中级矿产地图数量：${list_dui.detail.zj_num}</p>
              <p>高级矿产地图数量：${list_dui.detail.gj_num}</p>`;
    let newlist_dui = list_dui.list
      .map((item, index) => {
        return `
           <div class="exchange">
                <img src="${IMG_DOMAIN + item.info.logo}" alt="" />
                <p>${item.info.name}<br><span>${
          index > 1 ? "使用高级矿产图" : "使用中级矿产图"
        }</span></p>
                <span>${item.has_num}/${item.num}</span>
                <button data-id="${item.info.id}" id="duihuan_btn">兑换</button>
              </div>`;
      })
      .join(" ");
    ele.center_ov.innerHTML = newlist_dui;
    if (list_dui.list.length == 0) {
      ele.center_ov.innerHTML = ` <div class="img_wu">
                <img src="http://img.qxgs.cc/tiantianlaishouzu/img/public/kong.png" alt="">
                <p>暂无记录</p>
              </div>`;
      ele.exnum.innerHTML = " ";
    }

    // !点击兑换
    let duihuan_btnAll = document.querySelectorAll("#duihuan_btn");
    duihuan_btnAll.forEach((item) => {
      item.onclick = () => {
        clicDui(item.dataset.id);
      };
    });
  }

  // !请求原石切割列表
  initQIEGE();

  function initQIEGE() {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.QIEGELIST,
      header: {
        Authorization: token,
      },
      success: (res) => {
        cj_id = 0;
        // initDui();
        qieObj = res.data.list;
        qiejie = res.data.xi_jie;
        record_msg = res.data.record_msg;
        initYuanList();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // !渲染列表--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  function initYuanList() {
    //!渲染公告
    gundong(record_msg);
    gundong2(record_msg);
    gundong3(record_msg);
    // ele.tit1.innerHTML = record_msg[0];
    // ele.tit2.innerHTML = record_msg[0];
    // ele.tit3.innerHTML = record_msg[0];
    let newChu = qieObj.cj.map((item) => {
      return `<div class="havekuang">
                    <img id="cj_1" data-qg="${
                      item.qg_num >= 0 ? item.qg_num : -1
                    }" data-num="${item.num}" data-money="${
        item.info.money
      }" data-id="${
        item.id
      }" class="havekuangimg1" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/anniu.png" alt="" />
                     <img id="cj_2" style="display:none;" class="havekuangimg2" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/dui.png" alt="" /> 
                       <span>${item.name}拥有</span>
                     </div>
                      <p>${item.num}</p>`;
    });
    ele.haveList1.innerHTML = newChu;
    ele.qiegezheng = $("#qiegezheng");
    // !第一个id
    ele.cj_1 = $("#cj_1");
    ele.cj_2 = $("#cj_2");
    ele.havep1 = $("#havep1");
    ele.cj_1.onclick = () => {
      // !渲染价钱
      let fontgreen1All = document.querySelectorAll("#fontgreen1");
      fontgreen1All.forEach((item) => {
        item.innerHTML = cj_1.dataset.money;
      });
      // !渲染切割证
      if (ele.cj_1.dataset.qg >= 0) {
        openMdl(ele.qiegezheng);
        ele.qiegezheng.innerHTML = `<p>切割证（${ele.cj_1.dataset.qg}）</p>
              <button id="shiyongQie">使用</button>`;
      } else {
        closeMdl(ele.qiegezheng);
      }
      // !判断是否有免费机会
      if (qiejie.is_free == 1) {
        is_free = 1;
        ele.cut_confirm1.innerHTML = `免费切割`;
      }
      if (qiejie.is_over == 1) {
        closeMdl(ele.btmBoxIn1);
      }
      // !渲染有多少原石
      ele.havep1.innerHTML = `当前原石拥有：${ele.cj_1.dataset.num}`;
      //!使用切割证
      ele.shiyongQie = $("#shiyongQie");
      if (ele.shiyongQie) {
        ele.shiyongQie.onclick = () => {
          if (ele.cj_1.dataset.qg > 0) {
            is_qg = 1;
            closeMdl(ele.modal_cut);
            qie1();
          } else {
            openTips("暂无切割卷");
          }
        };
      }
      cj_id = ele.cj_1.dataset.id;
      if (ele.cj_1.dataset.num == 0) {
        openTips("暂无原石！");
      } else {
        if (ele.cj_1.dataset.money > qiejie.gold) {
          openTips("金币不足");
        } else {
          openMdl(ele.cj_2);
        }
      }
    };
    ele.cj_2.onclick = () => {
      closeMdl(ele.cj_2);
    };
    // !第三个列表渲染
    let newZhong = qieObj.zj
      .map((item, index) => {
        return `
        <div class="haveList">
           <div class="havekuang">
                <img id="gj_1" data-qg="${
                  item.qg_num >= 0 ? item.qg_num : -1
                }" data-num="${item.num}" data-money="${
          item.info.money
        }" data-id="${
          item.id
        }" data-ind="${index}" class="havekuangimg1" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/anniu.png" alt="" />
                <img id="gj_2${index}" style="display:none;" class="havekuangimg2" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/dui.png" alt="" />
                   <span>${item.name}拥有</span>
            </div>
                <p>${item.num}</p>
         </div>
      `;
      })
      .join(" ");
    ele.haveList2.innerHTML = newZhong;
    ele.qiegezheng2 = $("#qiegezheng2");
    ele.havep2 = $("#havep2");
    let gj_1All = document.querySelectorAll("#gj_1");
    gj_1All.forEach((item, index) => {
      item.onclick = () => {
        // !渲染价钱
        let fontgreen2All = document.querySelectorAll("#fontgreen2");
        fontgreen2All.forEach((ite) => {
          ite.innerHTML = item.dataset.money;
        });
        // !渲染切割证
        if (item.dataset.qg >= 0) {
          openMdl(ele.qiegezheng2);
          ele.qiegezheng2.innerHTML = `<p>切割证（${item.dataset.qg}）</p>
              <button id="shiyongqie2">使用</button>`;
        } else {
          closeMdl(ele.qiegezheng2);
        }
        // !使用切割证
        ele.shiyongqie2 = $("#shiyongqie2");
        if (ele.shiyongqie2) {
          ele.shiyongqie2.onclick = () => {
            if (item.dataset.qg > 0) {
              is_qg = 1;
              closeMdl(ele.modal_cut2);
              qie2();
            } else {
              openTips("暂无优惠卷");
            }
          };
        }
        //! 渲染数量
        ele.havep2.innerHTML = `当前原石拥有：${item.dataset.num}`;
        cj_id = item.dataset.id;
        // !判断有没有原石
        if (item.dataset.num == 0) {
          cj_id = 0;
          openTips("暂无原石！");
        } else {
          if (+item.dataset.money > +qiejie.gold) {
            openTips("金币不足");
          } else {
            let gj_2 = $(`#gj_2${item.dataset.ind}`);
            openMdl(gj_2);
          }
        }
        if (item.dataset.ind == 0) {
          ele.center_img2.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/yuanshi/shi tou.png" alt="">`;
          let gj_1 = $("#gj_21");
          let gj_3 = $("#gj_22");
          closeMdl(gj_1);
          closeMdl(gj_3);
        } else if (item.dataset.ind == 1) {
          ele.center_img2.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/yuanshi/11.png" alt="">`;
          let gj_1 = $("#gj_20");
          let gj_3 = $("#gj_22");
          closeMdl(gj_1);
          closeMdl(gj_3);
        } else if (item.dataset.ind == 2) {
          ele.center_img2.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/yuanshi/33.png" alt="">`;
          let gj_1 = $("#gj_20");
          let gj_3 = $("#gj_21");
          closeMdl(gj_1);
          closeMdl(gj_3);
        }
      };
    });
    // !第二个列表循环
    let newTree = qieObj.gj
      .map((item, index) => {
        return `
        <div class="haveList">
           <div class="havekuang">
                <img id="zj_1" data-qg="${
                  item.qg_num >= 0 ? item.qg_num : -1
                }" data-num="${item.num}" data-qg="${
          item.qg_num
        }" data-money="${item.info.money}" data-id="${
          item.id
        }" data-ind="${index}" class="havekuangimg1" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/anniu.png" alt="" />
                <img id="zj_2${index}" style="display:none;" class="havekuangimg2" src="http://img.qxgs.cc/tiantianlaishouzu/img/mine/dui.png" alt="" />
                   <span>${item.name}拥有</span>
            </div>
                <p>${item.num}</p>
         </div>
      `;
      })
      .join(" ");
    ele.haveList3.innerHTML = newTree;
    let zj_All = document.querySelectorAll("#zj_1");
    ele.qiegezheng2 = $("#qiegezheng2");
    ele.havep2 = $("#havep2");
    zj_All.forEach((item, index) => {
      item.onclick = () => {
        let fontgreen2All = document.querySelectorAll("#fontgreen2");
        fontgreen2All.forEach((ite) => {
          ite.innerHTML = item.dataset.money;
        });
        if (item.dataset.qg >= 0) {
          openMdl(ele.qiegezheng2);
          ele.qiegezheng2.innerHTML = `<p>切割证（${item.dataset.qg}）</p>
              <button id="shiyongqie3">使用</button>`;
        } else {
          closeMdl(ele.qiegezheng2);
        }
        // 使用切割证
        ele.shiyongqie3 = $("#shiyongqie3");
        if (ele.shiyongqie3) {
          ele.shiyongqie3.onclick = () => {
            if (item.dataset.qg > 0) {
              is_qg = 1;
              closeMdl(ele.modal_cut2);
              qie3();
            } else {
              openTips("暂无优惠卷");
            }
          };
        }
        // !渲染数量
        ele.havep2.innerHTML = `当前原石拥有：${item.dataset.num}`;
        cj_id = item.dataset.id;
        // !判断有没有原石
        if (item.dataset.num == 0) {
          cj_id = 0;
          openTips("暂无原石！");
        } else {
          if (+item.dataset.money > +qiejie.gold) {
            openTips("金币不足");
          } else {
            let zj_2 = $(`#zj_2${item.dataset.ind}`);
            openMdl(zj_2);
          }
        }
        if (item.dataset.ind == 0) {
          ele.center_img3.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/yuanshi/shi tou.png" alt="">`;
          let zj_1 = $("#zj_21");
          let zj_3 = $("#zj_22");
          closeMdl(zj_1);
          closeMdl(zj_3);
        } else if (item.dataset.ind == 1) {
          ele.center_img3.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/yuanshi/44.png" alt="">`;
          let zj_1 = $("#zj_20");
          let zj_3 = $("#zj_22");
          closeMdl(zj_1);
          closeMdl(zj_3);
        } else if (item.dataset.ind == 2) {
          ele.center_img3.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/yuanshi/22.png" alt="">`;
          let zj_1 = $("#zj_20");
          let zj_3 = $("#zj_21");
          closeMdl(zj_1);
          closeMdl(zj_3);
        }
      };
    });
    // !tabbar改变
    ele.option_primary.onmouseup = () => {
      chong();
    };
    ele.option_middle.onmouseup = () => {
      chong();
    };
    ele.option_senior.onmouseup = () => {
      chong();
    };
  }

  function chong() {
    cj_id = null;
    let zj_1 = $("#zj_20");
    let zj_3 = $("#zj_21");
    let zj_2 = $("#zj_22");
    closeMdl(zj_1);
    closeMdl(zj_3);
    closeMdl(zj_2);
    let gj_1 = $("#gj_20");
    let gj_3 = $("#gj_21");
    let gj_2 = $("#gj_22");
    closeMdl(gj_1);
    closeMdl(gj_2);
    closeMdl(gj_3);
  }
  //! 调用兑换接口todos
  function clicDui(id) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.CLICKDUI,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
      },
      success: (res) => {
        openTips(res.msg);
        duihuan();
        initDui();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  //! 解锁原石
  function jiesuos(id) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.JIESUO,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
      },
      success: (res) => {
        openTips(res.msg);
        closeMdl(ele.modal_jiesuo);
        initAsync();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  //!切割原石
  function jiesuo(id, color) {
    let token = getCookie("token");
    ajax({
      method: "post",
      url: API_PATH.CLICKYUAN,
      header: {
        Authorization: token,
      },
      data: {
        id: id,
        color: color,
        is_free: is_free ? is_free : 0,
        is_qg: is_qg ? is_qg : 0,
      },
      success: (res) => {
        openTips(res.msg);
        // 初始化is_free
        is_free = 0;
        is_qg = 0;
        // if (color != 1) {
        if (res.data.info.b_type == 2) {
          ele.img_bg.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/home/jinbi3.png" alt="">`;
          ele.money_num.innerHTML = res.data.num;
          openMdl(ele.modal_jiangli);
        } else if (res.data.info.b_type == 1) {
          ele.img_bg.innerHTML = `<img src="http://img.qxgs.cc/tiantianlaishouzu/img/home/yinbi.png" alt="">`;
          ele.money_num.innerHTML = res.data.num;
          openMdl(ele.modal_jiangli);
        } else if (res.data.info.logo) {
          ele.img_bg.innerHTML = `<img src="${
            IMG_DOMAIN + res.data.info.logo
          }" alt="">`;
          ele.money_num.innerHTML = `${res.data.info.name}<span style="position: absolute;color:#ff0000;font-size:16px;">x${res.data.num}</span>`;
          openMdl(ele.modal_jiangli);
        }
        // }
        initQIEGE();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }

  // !无缝滚动代码
  //js无缝滚动代码

  function gundong(msgs) {
    let box = document.getElementById("scroll-box");
    let parent = $("#ui1");
    let parent2 = $("#ui2");
    let newMsg = msgs
      .map((item) => {
        return ` <div class="li">${item}</div>`;
      })
      .join(" ");
    parent.innerHTML = newMsg;
    parent2.innerHTML = parent.innerHTML;
    var timer = setInterval(autoScrollLine, 30);

    function autoScrollLine() {
      if (box.scrollTop >= parent.offsetHeight) {
        box.scrollTop = 0;
      } else {
        box.scrollTop++;
      }
      if (box.scrollTop % box.offsetHeight == 0) {
        clearInterval(timer);
        setTimeout(() => {
          timer = setInterval(autoScrollLine, 30);
        }, 2000);
      }
    }
  }

  function gundong2(msgs) {
    let box = document.getElementById("scroll-box2");
    let parent = $("#tow");
    let parent2 = $("#tow1");
    let newMsg = msgs
      .map((item) => {
        return ` <div class="li">${item}</div>`;
      })
      .join(" ");
    parent.innerHTML = newMsg;
    parent2.innerHTML = parent.innerHTML;
    var timer = setInterval(autoScrollLine, 30);

    function autoScrollLine() {
      if (box.scrollTop >= parent.offsetHeight) {
        box.scrollTop = 0;
      } else {
        box.scrollTop++;
      }
      if (box.scrollTop % box.offsetHeight == 0) {
        clearInterval(timer);
        setTimeout(() => {
          timer = setInterval(autoScrollLine, 30);
        }, 2000);
      }
    }
  }

  function gundong3(msgs) {
    let box = document.getElementById("scroll-box3");
    let parent = $("#tree_my");
    let parent2 = $("#tree2_my");
    let newMsg = msgs
      .map((item) => {
        return ` <div class="li">${item}</div>`;
      })
      .join(" ");
    parent.innerHTML = newMsg;
    parent2.innerHTML = parent.innerHTML;
    var timer = setInterval(autoScrollLine, 30);

    function autoScrollLine() {
      if (box.scrollTop >= parent.offsetHeight) {
        box.scrollTop = 0;
      } else {
        box.scrollTop++;
      }
      if (box.scrollTop % box.offsetHeight == 0) {
        clearInterval(timer);
        setTimeout(() => {
          timer = setInterval(autoScrollLine, 30);
        }, 2000);
      }
    }
  }
})();
